<template>
  <div class="box" v-if="!isShow">
    <div class="box-fix">
      <div class="box-icon">

        <img class="top-img"
          src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png" alt="">

        <div class="open-app">打开app</div>
      </div>
      <p  @click="isShow=true" class="input-wrapper">
        <el-input class="box-input" v-model="input1" placeholder="搜索" :prefix-icon="Search" />
      </p>
    </div>

    <div class="carousel-box">
      <el-carousel :interval="3000" indicator-position="none" height="126px" loop type="card">
        <el-carousel-item class="carousel-box-item" v-for="item in 4" :key="item">
          <h3 text="2xl"><img class="carousel-box-img"
              src="https://fdfs.xmcdn.com/storages/0bb8-audiofreehighqps/E4/69/GKwRIDoIdDCJAAGZcQIxG_54.jpg" alt=""></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="middle-icon">
      <div class="icon-show">
        <div @click="goCharts" class="iconfont icon-paihangbang iconwidth"></div>
        <div>排行榜</div>
      </div>
      <div class="icon-show">
        <div @click="goCategory" class="iconfont icon-fenlei iconwidth"></div>
        <div>分类</div>
      </div>
      <div class="icon-show">
        <div @click="goListen" class="iconfont icon-caidan iconwidth"></div>
        <div>听单</div>
      </div>
    </div>
    <div class="bigPicture">
      <img src="https://imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" alt="">
    </div>
    <div>
      <div class="box-newPerson">
        <div class="box-text">新人必听</div>
        <div class="box-flex">
          <div class="newPerson-item" v-for="(item, index) in listenList" :key="index">
            <div class="fixedWidth">
              <div class="newPerson-img"><img :src="'https://imagev2.xmcdn.com/'+item.albumCoverPath
" alt=""></div>
              <div class="iconfont icon-bofangshu shutu"></div>
              <div v-if="item.albumPlayCount>100000000" class="newPerson-num">{{ (item.albumPlayCount/100000000).toFixed(2)}}亿</div>
              <div v-else class="newPerson-num">{{ (item.albumPlayCount/10000).toFixed(2)}}万</div>
            </div>
            <div class="newPerson-text">{{ item.albumTitle }}</div>
          </div>
        </div>
      </div>
      <div class="box-free">

        <div class="free-Box"><div class="frew-title">限时免费</div>
          <van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>
        </div>
        <div class="scroll-box">
          <div class="scroll-show">
            <div class="scroll-open">
              <div class="scroll-item" v-for="(item, index) in limitedFreeAlbum?.limitedTimeFreeAlbums" :key="index">
                <div class="scroll-item-fixed">
                  <img class="scroll-item-img" :src="item.coverPath" alt="">
                  <div class="iconfont icon-bofangshu shutu"></div>  
                  <div class="newPerson-num" v-if="item.playCount>100000000">{{ (item.playCount/100000000).toFixed(2)}}亿</div>
                  <div class="newPerson-num" v-else>{{ (item.playCount/10000).toFixed(2)}}万</div>
                </div>
                <div class="newPerson-text">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hotBox">
        <div class="hotBox-title">今日热点</div>
        <div class="hotBox-Wraper">
          <div class="hotBox-item" v-for="(item,index) in hotTrack?.hotTracks" :key="index">
            <div class="hotBox-left">
              <img class="hotBox-left-img" :src="item.albumCoverPath" alt="">
              <div class="iconfont icon-bofang left-icon"></div>
            </div>
            <div class="hotBox-right">
              <div class="right-title">{{ item.title }}</div>
              <div class="right-icon">
                <div class="iconfont icon-weidenglu icon1"></div>
                <div class="textSTyle">{{item.anchorName}}</div>
                <div class="iconfont icon-erji icon1"></div>
                <div class="textSTyle">{{ (item.playCount/10000).toFixed(2) }}万</div>
              </div>
            </div>
          </div>
        </div>
      </div>
     
    </div>


    <Footer></Footer>
  </div>
  <SearchModel v-show="isShow" v-model="isShow"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

// import { ElCarouselItem as __unplugin_components_0 } from 'element-plus/es';
// import 'element-plus/es/components/base/style/css';
// import 'element-plus/es/components/carousel-item/style/css';
export default defineComponent({
  name: "Home",
});


</script>

<script setup lang="ts">
import { onMounted ,ref,computed} from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { Swipe, SwipeItem } from 'vant';
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/api/home"
import Footer from "@/components/Footer/Footer"
import getNewUserLikeStore from "@/stores/home"
const isShow = ref(false);
const pageNum = ref(1)
const pageSize=ref(6)
const router = useRouter()
const input1 = ref('')
const useLikeStore = getNewUserLikeStore()
const time = ref(30 * 60 * 60 * 1000);
//  getNewListen(){
//   let result=request.reqNewListen(pageNum, pageSize)
// }
const listenList = computed(() => useLikeStore.NewListenList.albums)
const hotTrack = computed(() => useLikeStore.hotPointList.hotTrack)
const limitedFreeAlbum=computed(()=>useLikeStore.hotPointList.limitedFreeAlbum)

// const listenList=useLikeStore.NewListenList
// console.log(111, listenList)
// console.log(222, hotTrack)
// console.log(333,limitedFreeAlbum);

const goListen = () => {
  router.push('/listen')
}
const goCategory = () => {
  router.push('/category')
}
const goCharts = () => {
  router.push('/charts')
}
onMounted(() => {
  useLikeStore.getNewListen(pageNum.value, pageSize.value)
  useLikeStore.getHotPoint()
})
</script>

<style scoped lang="scss">
.hotBox{
  margin-top: 10px;
  .hotBox-title{
    margin-top: 10px;
    font-size: 16px;
    margin-left: 12px;
    font-weight: 900;
  }
  .hotBox-Wraper{
    padding: 10px;
.hotBox-item{
  display: flex;
   margin-bottom: 10px;
.hotBox-left{
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
.hotBox-left-img{
  width: 70px;
  height: 70px;
}
.left-icon{
position: absolute;
left: 30px;
top: 24px;
}
}
.hotBox-right{
  margin-left: 10px;
.right-title{
  font-size: 14px;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    
}
.right-icon{
display: flex;
margin-top: 6px;
.icon1{
  font-size: 10px;
}
.textSTyle{
  font-size: 10px;
  color: #706a6a;
  margin: 0 6px;
}
}
}
}
  }

}

.box-newPerson {
  .box-text {
    margin-top: 10px;
    font-size: 16px;
    margin-left: 12px;
    font-weight: 900;
  }

  .box-flex {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
  }

  .newPerson-item {
    width: 30%;

    .fixedWidth {
      position: relative;
    }

    // .fixedWidth{
    //   display: ;
    // }
    .newPerson-img {
      width: 103px;
      height: 103px;
      img{
        width: 103px;
      height: 103px;
      }
    }

    .shutu {
      position: absolute;
      left: 0;
      top: 84px;
    }

    .newPerson-num {
      position: absolute;
      font-size: 9px;
      color: white;
      left: 20px;
      top: 88px;
    }

    .newPerson-text {
      font-size: 12px;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
}

.box-free {
  margin-top: 20px;
  .colon {
    display: inline-block;
    margin: 0 2px;
    color: red;
  }
  .block {
    display: inline-block;
    width: 18px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: red;
  }
  .free-Box {
    margin-top: 10px;
    font-size: 16px;
    margin-left: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    .frew-title{
      margin-right: 10px;
    }
  }

  .scroll-box {
    margin-top: 20px;
    overflow: hidden;

    .scroll-show {
      overflow-x: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      .scroll-open {
        display: flex;

        .scroll-item {
          width: 110px;
          margin-right: 10px;

          .scroll-item-fixed {
            position: relative;

            .scroll-item-img {
              width: 110px;
              height: 110px;
            }

            .shutu {
              position: absolute;
              left: 0;
              top: 92px;
            }

            .newPerson-num {
              position: absolute;
              font-size: 9px;
              color: white;
              left: 20px;
              top: 94px;
            }


          }

          .newPerson-text {
            font-size: 12px;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }



  }
}




* {
  margin: 0;
  padding: 0;
}

.box {
  width: 375px;
    .box-fix {
    position: fixed;
    width: 100%;
    background-color: white;
    top: 0;
    z-index: 10;
    .box-icon {
      display: flex;
      box-sizing: border-box;
      padding: .6rem;
      justify-content: space-between;

      .top-img {
        width: 7rem;
        height: 2rem;
      }

      .open-app {
        text-align: center;
        height: 1.5rem;
        line-height: 1.5rem;
        width: 4rem;
        color: white;
        font-size: .2rem;
        background: red;
        border-radius: 1.5rem;

      }
    }

    .input-wrapper {
      /* border-radius: 8rem; */
      margin: .1rem .6rem;
      padding: 0;
      margin-bottom: 12px;


      ::v-deep(.el-input__wrapper) {
        border-radius: 20px;
        outline-style: none;
      }

      //     :deep :focus-visible {
      //   outline-style:none;
      // }
    }

  }
}

.carousel-box {

  margin-top: 100px;
  width: 100%;
  text-align: center;
  line-height: 126px;

  .is-active {
    //  margin-left: 20px;
    //  margin-right: 100px;
    // width: 100%;
  }

  .el-carousel__item {
    border-radius: 10px;
    // width: 100%;
    // width: 80%;
  }

  .carousel-box-item {}

  .carousel-box-img {
    width: 100%;
    height: 126px;

  }
}

.middle-icon {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  margin-bottom: 20px;
}

.iconwidth {
  font-size: 30px;
}

.icon-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bigPicture {
  width: 100%;

  img {
    width: 100%;
  }
}

/* 轮播图 */
/* #region */


/* #endregion */</style>

